<template>
  <div class="main-con editWarehouseInfo">
    <!-- 顶部导航 -->
    <div class="breadcrumb-con">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index/warehouseInfo' }">仓库信息</el-breadcrumb-item>
        <el-breadcrumb-item>{{ editText }}仓库信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 表单信息 -->
    <div class="form-con">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
        <h2 class="item-title">
          仓库信息
        </h2>
        <div class="form-item-con">
          <el-form-item label="仓库编号" prop="warehouseNo">
            <div class="form-item-input">
              <el-input v-model="ruleForm.warehouseNo" placeholder="请输入仓库编号"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="仓库名称" prop="warehouseName">
            <div class="form-item-input">
              <el-input v-model="ruleForm.warehouseName" placeholder="请输入仓库名称"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="配送区域" prop="deliveryRegion">
            <div class="form-item-input">
              <el-input v-model="ruleForm.deliveryRegion" placeholder="请输入配送区域"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="仓库类型" prop="type">
            <div class="form-item-input">
              <el-radio-group v-model="ruleForm.type">
                <el-radio :label="0">电商</el-radio>
                <el-radio :label="1">社群</el-radio>
              </el-radio-group>
            </div>
          </el-form-item>
        </div>

        <h2 class="item-title">
          仓库供应门店
        </h2>
        <div class="form-item-con">
          <div class="select-num">供应门店数：{{selectedStoreData.length}}</div>
          <el-button class="select-btn" size="small" type="primary" @click="selectStore">添加供应门店</el-button>
          <div class="table-con">
            <el-table :data="selectedStoreData" border size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 50%">
              <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="storeNo" label="门店编号" width="" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="storeName" label="门店名称" width="" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="操作" width="" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="handleDeleteStore(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <h2 class="item-title" v-if="ruleForm.type == 0">
          仓库供应商品
        </h2>
        <div class="form-item-con" v-if="ruleForm.type == 0">
          <div class="select-num">供应商品数：0</div>
          <el-button class="select-btn" size="small" type="primary" @click="selectProduct">添加供应商品</el-button>
          <div class="table-con">
            <el-table :data="selectedProductData" border size="mini" :header-cell-style="{background:'#f8f8f8'}" style="width: 50%">
              <el-table-column type="index" label="序号" width="50" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="productNo" label="商品编号" width="" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column prop="productName" label="商品名称" width="" align="center" :show-overflow-tooltip="true">
              </el-table-column>
              <el-table-column label="操作" width="" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="handleDeleteProduct(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <el-form-item>
          <div class="submit-btn-con">
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
            <el-button @click="handleBack">取消</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <!-- 选择门店 -->
    <m-selectstore :warehouseType="ruleForm.type" :showSelectStoreCon="showSelectStoreCon" @close="colseStoreCon" @sure="sureSelectStore"></m-selectstore>

    <!-- 选择商品 -->
    <m-selectproduct :showSelectProductCon="showSelectProductCon" @close="colseProductCon" @sure="sureSelectProduct"></m-selectproduct>
  </div>
</template>

<script>
import { addWarehouseInfo, queryEditWarehouseInfo, updateWarehouseInfo } from "@/common/service/productManagement/warehouseInfo.js";
import mSelectstore from "@/components/m-selectstore/index.vue";
import mSelectproduct from "@/components/m-selectproduct/index.vue";
export default {
    name: "editWarehouseInfo",
    data() {
        return {
            editType: "", //操作类型  add=添加  update=修改
            editText: '',//操作文字
            editId: '',//操作的id
            //表单信息
            ruleForm: {
                warehouseNo: "",
                warehouseName: "",
                deliveryRegion: "",
                type: 0
            },
            rules: {
                warehouseNo: [
                    {
                        required: true,
                        message: "请输入仓库编号",
                        trigger: "blur"
                    }
                ],
                warehouseName: [
                    {
                        required: true,
                        message: "请输入仓库名称",
                        trigger: "blur"
                    }
                ],
                deliveryRegion: [
                    {
                        required: true,
                        message: "请输入配送区域",
                        trigger: "blur"
                    }
                ],
                type: [
                    {
                        required: true,
                        message: "选择仓库类型",
                        trigger: "change"
                    }
                ]
            },
            //选择门店
            selectedStoreData: [], //已选的供应门店
            showSelectStoreCon: false, //控制选择门店弹窗的显示隐藏标识
            //选择商品
            selectedProductData: [], //已选的供应商品
            showSelectProductCon: false //控制选择门店弹窗的显示隐藏标识
        };
    },
    created() {
        this.editType = this.$route.query.editType;
        this.editText = this.$route.query.editText;
        if (this.editType == "update") {
            this.editId = this.$route.query.editId;
            this._queryEditWarehouseInfo();
        }
    },
    methods: {
        /*-----------------------------选择门店操作-----------------------------*/
        //显示选择门店弹窗
        selectStore() {
            this.showSelectStoreCon = true;
        },
        //隐藏选择门店弹窗
        colseStoreCon(val) {
            this.showSelectStoreCon = val;
        },
        //渲染选择的门店
        sureSelectStore(val) {
            const self = this;
            if (!this.selectedStoreData) {
                this.selectedStoreData = [];
            }
            var selected = this.selectedStoreData;
            var curSelect = JSON.parse(val);
            curSelect.forEach((item, index) => {
                var flag = true;
                selected.forEach((item1, index) => {
                    if (item1.storeNo == item.storeNo) {
                        flag = false;
                    }
                });
                if (flag) {
                    self.selectedStoreData.push(item);
                }
            });
            this.showSelectStoreCon = false;
        },
        //删除选择的门店
        handleDeleteStore(index, row) {
            this.selectedStoreData.splice(index, 1);
        },

        /*-----------------------------选择商品操作-----------------------------*/
        //显示选择商品弹窗
        selectProduct() {
            this.showSelectProductCon = true;
        },
        //隐藏选择商品弹窗
        colseProductCon(val) {
            this.showSelectProductCon = val;
        },
        //渲染选择的商品
        sureSelectProduct(val) {
            const self = this;
            if (!this.selectedProductData) {
                this.selectedProductData = [];
            }
            var selected = this.selectedProductData;
            var curSelect = JSON.parse(val);
            curSelect.forEach((item, index) => {
                var flag = true;
                selected.forEach((item1, index) => {
                    if (item1.productNo == item.productNo) {
                        flag = false;
                    }
                });
                if (flag) {
                    self.selectedProductData.push(item);
                }
            });
            this.showSelectProductCon = false;
        },
        //删除选择的商品
        handleDeleteProduct(index, row) {
            this.selectedProductData.splice(index, 1);
        },

        /*-----------------------------保存校验数据操作-----------------------------*/
        // 点击确定
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    var flag = true;
                    if (this.selectedStoreData.length == "0") {
                        this.$message({
                            showClose: true,
                            message: "请选择供应门店",
                            type: "error"
                        });
                        flag = false;
                    }
                    if (this.ruleForm.type == 0) {
                        if (this.selectedProductData.length == "0") {
                            this.$message({
                                showClose: true,
                                message: "请选择供应商品",
                                type: "error"
                            });
                            flag = false;
                        }
                    }
                    if (flag) {
                        if (this.editType == "add") {
                            this._addWarehouseInfo();
                        } else if (this.editType == "update") {
                            this._updateWarehouseInfo();
                        }
                    }
                } else {
                    return false;
                }
            });
        },
        // 执行添加操作
        _addWarehouseInfo() {
            //获取门店编号集合
            var storeNoArr = [];
            this.selectedStoreData.forEach((item, indeex) => {
                storeNoArr.push(item.storeNo);
            });
            var storeNoStr = storeNoArr.join(",");
            //获取商品编号集合
            var goodsNoArr = [];
            this.selectedProductData.forEach((item, indeex) => {
                goodsNoArr.push(item.productNo);
            });
            var goodsNoStr = goodsNoArr.join(",");

            var data = {};
            if (this.ruleForm.type == 0) {
                data = {
                    warehouseNo: this.ruleForm.warehouseNo,
                    warehouseName: this.ruleForm.warehouseName,
                    deliveryRegion: this.ruleForm.deliveryRegion,
                    type: this.ruleForm.type,
                    warehouseStores: storeNoStr,
                    warehouseProducts: goodsNoStr
                };
            } else if (this.ruleForm.type == 1) {
                data = {
                    warehouseNo: this.ruleForm.warehouseNo,
                    warehouseName: this.ruleForm.warehouseName,
                    deliveryRegion: this.ruleForm.deliveryRegion,
                    type: this.ruleForm.type,
                    warehouseStores: storeNoStr,
                    warehouseProducts: ""
                };
            }
            addWarehouseInfo(data)
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "添加成功!"
                    });
                    this.handleBack();
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },
        // 执行修改操作
        _updateWarehouseInfo() {
            //获取门店编号集合
            var storeNoArr = [];
            this.selectedStoreData.forEach((item, indeex) => {
                storeNoArr.push(item.storeNo);
            });
            var storeNoStr = storeNoArr.join(",");
            //获取商品编号集合
            var goodsNoArr = [];
            this.selectedProductData.forEach((item, indeex) => {
                goodsNoArr.push(item.productNo);
            });
            var goodsNoStr = goodsNoArr.join(",");

            var data = {};
            if (this.ruleForm.type == 0) {
                data = {
                    id: this.editId,
                    warehouseNo: this.ruleForm.warehouseNo,
                    warehouseName: this.ruleForm.warehouseName,
                    deliveryRegion: this.ruleForm.deliveryRegion,
                    type: this.ruleForm.type,
                    warehouseStores: storeNoStr,
                    warehouseProducts: goodsNoStr
                };
            } else if (this.ruleForm.type == 1) {
                data = {
                    id: this.editId,
                    warehouseNo: this.ruleForm.warehouseNo,
                    warehouseName: this.ruleForm.warehouseName,
                    deliveryRegion: this.ruleForm.deliveryRegion,
                    type: this.ruleForm.type,
                    warehouseStores: storeNoStr,
                    warehouseProducts: ""
                };
            }
            updateWarehouseInfo(data)
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "保存成功!"
                    });
                    this.handleBack();
                })
                .catch(err => {
                    this.$message.error(err.message);
                });
        },

        // 查询编辑仓库信息的数据
        _queryEditWarehouseInfo(){
          var data = {
            warehouseId: this.editId
          }
          queryEditWarehouseInfo(data).then((res) => {
            this.ruleForm.warehouseNo = res[0].warehouseNo? res[0].warehouseNo : '';
            this.ruleForm.warehouseName = res[0].warehouseName? res[0].warehouseName : '';
            this.ruleForm.deliveryRegion = res[0].deliveryRegion? res[0].deliveryRegion : '';
            this.ruleForm.type = res[0].type;
            this.selectedStoreData = res[0].warehouseStores? res[0].warehouseStores : '';
            this.selectedProductData = res[0].warehouseProducts? res[0].warehouseProducts : '';
          }).catch(err => {
            this.$message.error(err.message);
          })
        },
        

        /*-----------------------------返回操作-----------------------------*/
        handleBack() {
            this.$router.push({
                path: "/index/warehouseInfo"
            });
        }
    },
    components: {
        "m-selectstore": mSelectstore,
        "m-selectproduct": mSelectproduct
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.select-num {
    font-size: 14px;
    color: #606266;
}
.select-btn {
    margin-top: 5px;
    margin-bottom: 10px;
}
.submit-btn-con {
    margin-top: 20px;
}
</style>